<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>订单查询</span>
        </div>
      </template>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="form.orderNumber" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="form.customerName" placeholder="请输入客户名称"></el-input>
        </el-form-item>
        <el-form-item label="下单日期">
          <el-date-picker v-model="form.orderDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="orderNumber" label="订单号" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
        <el-table-column prop="orderDate" label="下单日期"></el-table-column>
        <el-table-column prop="totalAmount" label="订单金额"></el-table-column>
        <el-table-column prop="status" label="订单状态"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="viewDetails(scope.$index)">查看详情</el-button>
            <el-button style="margin-top:20px;margin-left: 0px;" size="mini" type="danger" @click="cancelOrder(scope.$index)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          orderNumber: '',
          customerName: '',
          orderDate: ''
        },
        orders: [
          { orderNumber: '123456', customerName: '1', orderDate: '2023-10-01', totalAmount: '1000元', status: '已支付' },
          { orderNumber: '789012', customerName: '2', orderDate: '2023-10-02', totalAmount: '500元', status: '待支付' },
          { orderNumber: '345678', customerName: '3', orderDate: '2023-10-03', totalAmount: '2000元', status: '已发货' }
        ]
      };
    },
    methods: {
      onSubmit() {
        // 这里可以添加查询订单的逻辑
        console.log('查询条件:', this.form);
        // 模拟查询结果
        this.orders = this.orders.filter(order => {
          return (this.form.orderNumber ? order.orderNumber.includes(this.form.orderNumber) : true) &&  
             (this.form.customerName ? order.customerName.includes(this.form.customerName) : true) &&               
        (this.form.orderDate ? new Date(order.orderDate).toDateString() === new Date(this.form.orderDate).toDateString() : true);
        });
      },
      viewDetails(index) {
        // 这里可以添加查看订单详情的逻辑
        const order = this.orders[index];
        this.$alert(`订单号: ${order.orderNumber}\n客户名称: ${order.customerName}\n下单日期: ${order.orderDate}\n订单金额: ${order.totalAmount}\n订单状态: ${order.status}`, '订单详情', {
          confirmButtonText: '确定'
        });
      },
      cancelOrder(index) {
        // 这里可以添加取消订单的逻辑
        this.$confirm('此操作将永久取消该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.orders.splice(index, 1);
          this.$message.success('取消成功');
        }).catch(() => {
          this.$message.info('已取消操作');
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .box-card {
    width: 900px;
    height: auto;
    margin-left: 350px;
    background-color: rgba(114, 198, 155, 0.112);

  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .demo-form-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  